<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gesture Setup</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="options.js"></script>
<script type="text/javascript" src="../gestures.js"></script>
<script type="text/javascript">
	var options = new GestureOptions();
	var currentTextbox = null;
	var currentTextboxOriginalLabel;
	
	function loadForm() {
		options.LoadSettings();
		var userGestures = options.UserGestures;
					
		for (var ug in userGestures) {
			var actionName;
			for (actionName in options.ActionTypes) {
				if (options.ActionTypes[actionName] == parseInt(userGestures[ug]))
					break;
			}
			$('#' + actionName).val(ug);
		}
	}
	
	function saveForm() {
		var userGestures = new Array();
		$('input[type=text]').each(function() {
			if ($(this).val() != "") {
				userGestures[$(this).val()] = options.ActionTypes[$(this).attr('id')];
			}
		});
		
		options.SaveSettings(userGestures, '#ff0000');
	}
	
	function GestureComplete(chain) {
		if (currentTextbox != null)
		{
			$(currentTextbox).val(chain.join(''));
			$(currentTextbox).focus();
		}
		
	}
	
	$(document).ready(function() {
		loadForm();
		$.gestures.init({color:'#000', onGestureComplete:GestureComplete});
		$.gestures.OnGestureComplete = GestureComplete;
		
		$('input[type=text]').each(function() {
			$(this).focus(function() { 
				if (currentTextbox != this) {
					currentTextbox = this;
					currentTextboxOriginalLabel = $("label[for='" + $(this).attr("id") + "']").html();
					$("label[for='" + $(this).attr("id") + "']").html($("label[for='" + $(this).attr("id") + "']").html() + " (recording, draw anywhere on the screen to set gesture) ");
				}
			}).blur(function() {
				if (currentTextbox == this && !$.gestures.Recording) { 
					currentTextbox = null; 
					$("label[for='" + $(this).attr("id") + "']").html(currentTextboxOriginalLabel);
				}
			});
		});
	});
</script>
</head>
<body id="gesture_options">
	
	<img id="top" src="top.png" alt="">
	<div id="form_container">
	
		<h1><a>Gesture Setup</a></h1>	
		
		<form class="appnitro">
					<div class="form_description">
			<h2>Gesture Setup</h2>
			<p>Edit your gestures here</p>
		</div>	
			<h3>Tab/Window Management</h3>		
			<ul >		
		<li id="li_1"  style="width:100%;" >
		<label class="description" for="NewTab">New Tab </label>
		<div>
			<input id="NewTab" name="NewTab" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_2"  style="width:100%;" >
		<label class="description" for="CloseTab">Close Current Tab </label>
		<div>
			<input id="CloseTab" name="CloseTab" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>
		</ul>
		
			<h3>Navigation</h3>
		<ul>
		<li id="li_3"  style="width:100%;" >
		<label class="description" for="HistoryBack">History Back </label>
		<div>
			<input id="HistoryBack" name="HistoryBack" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_4"  style="width:100%;" >
		<label class="description" for="HistoryForward">History Forward </label>
		<div>
			<input id="HistoryForward" name="HistoryForward" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>
			
		<li class="buttons">
			 <button onclick="saveForm()">Save</button>
		</li>
			</ul>
		</form>	
	</div>
	<img id="bottom" src="bottom.png" alt="">
	</body>
</html>